const path = require('path')
const { VueLoaderPlugin } = require('vue-loader');
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const {ModuleFederationPlugin} =require('webpack').container

module.exports={
    mode:'development',
    devtool:false,
    entry:path.resolve(__dirname, './src/index.js'),//入口文件
    output:{
        filename:'main.js',
        path:path.resolve(__dirname,'dist')
        // publicPath:'auto', 
        //指定应用程序中所有资源的基础路径
    },
    module:{  //载入loader
        rules:[
            {
                test: /\.jsx?$/,
                loader: 'babel-loader',
                exclude: /node_modules/,
                options: {
                  presets: ['@babel/preset-react'],
                },
            },{
                test: /\.vue$/,
                loader: 'vue-loader'
            },{
                test:/\.css$/, //用正则表达式匹配文件类型
                use:['style-loader',
                {
                    loader:'css-loader',
                    options:{
                        esModule:false
                    }
                }]
            },{
                test:/\.(png|jpe?g|svg|gif)$/,
                type:'asset',
                generator:{  //相当于使用file-loader
                    filename:"img/[name][ext]"
                },
                parser:{  //相当于使用url-loader
                    dataUrlCondition:{
                        maxSize:20*1024
                    }
                }
            }
        ]
    },
    plugins:[
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            title:"test",
            template:'./public/index.html'
        }),
        new VueLoaderPlugin(),
        new ModuleFederationPlugin({
            name: 'father',
            filename: 'remoteEntry.js',
            remotes: {
                child: 'child1@http://localhost:3002/remoteEntry.js',
                reactChild:'react1@http://localhost:3003/remoteEntry.js'
            },
            exposes: {
                './Swiper':'./src/components/Home/swiper.vue'
            },
            shared: {
                vue:{
                    singleton: true,
                    eager:true
                },
                'axios':{
                    singleton: true
                }, 
                'swiper/swiper-bundle.css':{
                    singleton: true
                },
                'swiper/esm/components/autoplay/autoplay.js':{
                    singleton: true
                },
                'swiper':{
                    singleton: true
                }
            },
        })
    ],
    devServer:{
        compress: true,
        port:3001,
        hot:true,
        headers: {
            'Access-Control-Allow-Origin': '*',
            'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, PATCH, OPTIONS',
            'Access-Control-Allow-Headers': 'X-Requested-With, content-type, Authorization',
        },
    }
}